<template>
  <el-form :model="activity" label-width="100px" size="small">
    <el-form-item label="活动名称">
      <el-input v-model="activity.activityName" />
    </el-form-item>
    <el-form-item label="活动举行时间">
      <el-date-picker
        v-model="activity.holdTime"
        type="date"
        value-format="YYYY 年 MM 月 dd 日"
        format="YYYY 年 MM 月 dd 日"
        placeholder="选择日期"
      />
    </el-form-item>
    <el-form-item label="活动地点">
      <el-input v-model="activity.site" />
    </el-form-item>
    <el-form-item label="活动简介">
      <QuillEditor
        v-model:content="activity.introduce"
        :options="editorOption"
        contentType="html"
        theme="snow"
      />
    </el-form-item>
    <el-form-item label="活动类型" prop="activityTypeId">
      <el-select v-model="activity.activityTypeId" placeholder="请选择活动类型">
        <el-option
          v-for="activityType in activityTypeList"
          :key="activityType.id"
          :label="activityType.type"
          :value="activityType.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="查看文件" v-if="fileList?.length">
      <div v-for="file in fileList" :key="file.id">
        <img
          v-if="isImage(file.fileName)"
          :src="'/fileServer' + file.filePath"
          class="show-image"
          :alt="file.fileName"
        />
        <a v-else :href="'/fileServer' + file.filePath">{{ file.fileName }}</a>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="update">更新</el-button>
      <el-button @click="goBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ElMessage } from "element-plus";
import axios from "axios";
const OK = 200;
const route = useRoute();
const router = useRouter();

// 响应式数据
const activity = ref({});
const activityTypeList = ref([]);
const fileList = ref([]);
const editorOption = ref({
  placeholder: "输入活动简介：",
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["blockquote", "code-block"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
    ],
  },
});

// 方法
const isImage = (fileName) => /\.(png|jpg)$/i.test(fileName);

const getActivityData = async (id) => {
  try {
    const res = await axios.get(`/api/activities/${id}`);
    if (res.data.code === OK) {
      activity.value = res.data.data;
      fileList.value = res.data.data.fileList || [];
    }
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const getActivityTypes = async () => {
  try {
    const res = await axios.get("/api/activityTypes");
    if (res.data.code === OK) activityTypeList.value = res.data.data;
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const update = async () => {
  try {
    const res = await axios.put("/api/activities/", activity.value);
    if (res.data.code === OK) {
      ElMessage.success("更新成功");
      router.push({ name: "ActivityList" });
    }
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const goBack = () => router.go(-1);

// 生命周期
onMounted(() => {
  getActivityTypes();
  if (route.query.id) getActivityData(route.query.id);
});

// 路由监听
watch(
  () => route.query.id,
  (newVal) => {
    if (newVal) getActivityData(newVal);
  }
);
</script>

<style scoped>
.show-image {
  width: 350px;
  height: 220px;
  object-fit: contain;
}

:deep(.ql-container) {
  min-height: 200px;
}
</style>
